<template>
  <gui-page :fullPage="true" ref="guiPage">
    <template v-slot:gBody>
      <view class="gui-flex1 gui-flex gui-columns">
        <!-- 搜索组件 -->
        <view class="gui-padding-x gui-bg-white gui-dark-bg-level-1">
          <gui-search @clear="search" @inputting="search"></gui-search>
        </view>

        <view class="gui-bg-white gui-flex">
          <view style="margin-top:20rpx;" class="gui-padding-x gui-flex1" @click="backPoint">
            <text class="gui-h6 gui-block gui-primary-text">位置：{{currentCity}}{{location.address}}</text>
          </view>

          <view style="margin-top:20rpx;" class="gui-padding-x gui-flex">
            <text class="gui-h6 gui-block gui-color-orange" @click="backPoint" style="margin-right: 10rpx;">确定</text>
            <!-- <text class="gui-h6 gui-block gui-color-orange" @click="mappoint">切换位置</text> -->
          </view>

        </view>




        <view class="gui-flex1 gui-relative" v-if="isShowCity">
          <scroll-view :scroll-y="true" :scroll-into-view="showCityId" :scroll-with-animation="true"
            class="gui-absolute-full">
            <view class="gui-padding-x" id="pageTop">
              <text class="gui-h6 gui-block gui-primary-text" style="padding-bottom:10rpx;">热门城市</text>
              <view class="gui-flex gui-rows gui-wrap gui-space-between"
                style="padding-bottom:10rpx; padding-right:30rpx;">
                <text class="hotcity-item gui-block gui-bg-white gui-dark-bg-level-3" v-for="(item, index) in hotCities"
                  :key="index" :data-cityname="item.name" :data-citycode="item.code"
                  @tap="chooseCity">{{item.name}}</text>
              </view>
              <block v-for="(cities, index) in cityData" :key="index">
                <text class="gui-city-AZ gui-block gui-primary-text" :id="'gui-city-AZ-'+index">{{index}}</text>
                <text class="city-item gui-block gui-border-b gui-primary-text" :id="'gui-city-list-'+city.code"
                  v-for="(city, cindex) in cities" :key="cindex" :data-cityname="city.name" :data-citycode="city.code"
                  @tap="chooseCity">{{city.name}}</text>
              </block>
            </view>
          </scroll-view>
          <view class="gui-city-AZ-right">
            <text class="gui-city-AZ-right-item gui-block gui-transition-all gui-primary-text"
              v-for="(char, index) in AZ" :key="index"
              :class="[rightTapIdx == index ? 'gui-bg-black' : '', rightTapIdx == index ? 'gui-color-white' : '']"
              :data-char="char" :data-idx="index" @tap="changAZ">{{char}}</text>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
  import graceJS from '@/Grace6/js/grace.js';
  import dataObj from '@/Grace6/data/cityData.js';
  export default {
    data() {
      return {
        cityData: dataObj.cityData,
        AZ: dataObj.AZ,
        // currentCity: "",
        currentCity: "",
        location: {
          address: '正在获取位置',
          latitude: '31.8639',
          longitude: '117.2808',
        },
        hotCities: [{
            code: 0,
            name: "全国"
          },
          {
            code: 110000,
            name: "北京市"
          },
          {
            code: 310000,
            name: "上海市"
          },
          {
            code: 330100,
            name: "杭州市"
          },
          {
            code: 610100,
            name: "西安市"
          },
          {
            code: 120000,
            name: "天津市"
          },
          {
            code: 340200,
            name: "芜湖市"
          }
        ],
        showCityId: '',
        searchTimer: null,
        searchIndex: -1,
        rightTapIdx: -1,
        mode: '',
        isShowCity: true
      }
    },
    onLoad(e) {
      if (e.type === "2") {
        this.isShowCity = false
      }
      if (e.mode) {
        this.mode = e.mode;
      }
      var self = this;

      // // uni.location可以使用时在用
      uni.getLocation({
        type: 'wgs84',
        success: function(res) {
          // console.log('当前位置的经度：', res);
          // console.log('当前位置的经度：' + res.longitude);
          // console.log('当前位置的纬度：' + res.latitude);

          uni.gRequest.get('map/geo?location=' + res.latitude + "," + res.longitude).then(result => {
            // self.location.latitude = res.latitude;
            // self.location.longitude = res.longitude;
            self.location.address = result.data.result.address;
            self.currentCity = result.data.result.address_component.city;
            uni.setStorageSync("cityName", self.location);

            const cityAllLocation = {
              ...self.location,
              currentCity: this.currentCity
            }
            uni.setStorageSync("cityAllLocation", JSON.stringify(cityAllLocation));
          });


        },
        fail(err) {
          console.log(err);
        }
      });




    },
    // onBackPress() {
    //   console.log('点击了onbackPress');
    // },
    methods: {
      // 临时使用
      // async getLocation() {
      //   const res = await uni.gRequest.get('map/geo?location=' + this.location.latitude + "," + this.location
      //     .longitude)
      //   // console.log(res);
      //   this.location.address = res.data.result.address;
      //   this.currentCity = res.data.result.address_component.city;

      //   // console.log(555, this.currentCity);
      //   const cityAllLocation = {
      //     ...this.location,
      //     currentCity: this.currentCity
      //   }
      //   uni.setStorageSync("cityAllLocation", JSON.stringify(cityAllLocation));

      // },
      // 选择
      chooseCity: function(e) {
        // 数据保存在 cityname 和 citycode
        var cityname = e.currentTarget.dataset.cityname;
        var citycode = e.currentTarget.dataset.citycode;

        uni.setStorageSync("selectCity", cityname);
        uni.setStorageSync("selectCity1", cityname);

        uni.setStorageSync("selectLocation", JSON.stringify({
          address: '',
          latitude: '',
          longitude: '',
        }));

        if (this.mode == 'index') {

          uni.switchTab({
            url: '/pages/switchPages/home'
          })

          return;

        }




        uni.navigateBack();

      },
      backPoint() {
        // uni.setStorageSync("selectCity", this.currentCity);
        uni.setStorageSync("selectCity", this.currentCity);
        uni.setStorageSync("selectLocation", JSON.stringify(this.location));




        if (this.mode == 'index') {

          uni.switchTab({
            url: '/pages/switchPages/home'
          })

          return;

        }




        uni.navigateBack();
      },
      // 搜索
      search: function(k) {
        k = k.toLowerCase();
        if (k == '') {
          this.showCityId = 'pageTop';
          return;
        }
        if (this.searchTimer != null) {
          clearTimeout(this.searchTimer);
        }
        this.searchTimer = setTimeout(() => {
          this.searchBase(k);
        }, 500);
      },
      searchBase: function(k) {
        this.searchIndex = -1;
        for (var i in this.cityData) {
          for (var ii = 0; ii < this.cityData[i].length; ii++) {
            if (this.cityData[i][ii].name.indexOf(k) == 0 || this.cityData[i][ii].pinyin.indexOf(k) == 0) {
              this.searchIndex = this.cityData[i][ii].code;
              break;
            }
          }
          if (this.searchIndex != -1) {
            break;
          }
        }
        if (this.searchIndex != -1) {
          this.showCityId = 'gui-city-list-' + this.searchIndex;
        }
      },
      // 点击切换
      changAZ: function(e) {
        this.rightTapIdx = -1;
        var char = e.currentTarget.dataset.char;
        this.showCityId = 'gui-city-AZ-' + char;
        this.rightTapIdx = e.currentTarget.dataset.idx;
        setTimeout(() => {
          this.rightTapIdx = -1;
        }, 2000);
      },
      mappoint() {
        const self = this;

        uni.chooseLocation({
          latitude: this.location.latitude || undefined,
          longitude: this.location.longitude || undefined,
          success(res) {
            // console.log(res)
            console.log('位置名称：' + res.name);
            console.log('详细地址：' + res.address);
            console.log('纬度：' + res.latitude);
            console.log('经度：' + res.longitude);

            self.location.latitude = res.latitude;
            self.location.longitude = res.longitude;
            self.location.address = res.name;

            if (res.address.concat('市') || res.address.concat('省')) {
              self.currentCity = res.address.split('省')[1].split("市")[0] + "市";
            }


          }
        });

      }
    }
  }
</script>
<style scoped>
  .gui-h6 {
    line-height: 80rpx;
    font-size: 28rpx;
  }

  .gui-city-search {
    padding: 20rpx 100rpx;
  }

  .gui-city-AZ {
    font-weight: 700;
    line-height: 88rpx;
    font-size: 30rpx;
  }

  .gui-city-AZ-right {
    width: 50rpx;
    position: fixed;
    right: 0;
    top: 80px;
  }

  /* #ifdef H5 */
  .gui-city-AZ-right {
    top: 110px;
  }

  /* #endif */
  .gui-city-AZ-right-item {
    line-height: 38rpx;
    height: 38rpx;
    width: 38rpx;
    border-radius: 40rpx;
    font-size: 22rpx;
    text-align: center;
  }

  .hotcity-item {
    width: 210rpx;
    font-size: 26rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 10rpx;
    text-align: center;
    overflow: hidden;
    margin: 8rpx 5rpx;
  }

  .city-item {
    line-height: 88rpx;
    height: 88rpx;
    font-size: 26rpx;
  }
</style>
